<template>
	<view class="content">
		<!-- <view class="search" @click="gosearch()"> -->
		<view class="search">
			<u-search placeholder="输入关键词进行搜索" v-model="keyword" :showAction="false"></u-search>
		</view>
		<view class="swiper">
			<u-swiper height="164px" indicator indicatorMode="dot" img-mode="scaleToFill" circular :list="swiperList"
				keyName="url"></u-swiper>
		</view>
		<view class="timeScroll">
			<view class="block">
				<view>
					<image src="../../static/leftIcon.png"></image>
				</view>
				<view>2023-09-20</view>
				<view>
					<image src="../../static/rightIcon.png"></image>
				</view>
			</view>
			<view class="block2">
				<view>
					前一天
				</view>
				<view>星期三</view>
				<view>
					后一天
				</view>
			</view>
		</view>
		<view class="dataBlock">
			<u-subsection mode="button" bgColor="#ffffff" :list="list" activeColor="#FF3B06" :current="curNow"
				@change="sectionChange"></u-subsection>
		</view>
		<view class="view-list">
			<view v-for="(item,index) in listss" class="view-item" :key="index">
				<view class="zz-good-item" @click="navTo(item.id)">
					<image style="position: relative;" class="image-good" :src="url2+item.images[0]" mode="aspectFill">
					</image>
					<view class="view-name u-line-1">
						{{item.name}}
					</view>
					<view class="view-price">
						<view><text class="text-price">￥{{item.price}}
							</text>
							<!-- <text class="old-price">￥2000</text> -->
						</view>
						<view><text class="text-remark theme-color">销量：{{item.sales}}</text></view>
					</view>
					<view class="view-num">
						<text v-for="(item2 ,index2) in item.tags" :key="index2">{{item2}}</text>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import url from '../../request/http.js'
	export default {
		data() {
			return {
				keyword: "",
				swiperList: [], //轮播图
				list: [],
				lists: [],
				curNow: 0,
				listss: [],
				url2: url.BASE_URL2
			}
		},
		onLoad() {
			this.url = url.BASE_URL2
			this.banner() //轮播图
			this.getindexclass() //分类
			this.getindexlist()
		},
		methods: {
			//首页列表
			async getindexlist() {
				const res = await this.$api("/Index/list", "get", {
					class_id: 0,
					date: "",
					keyword: "",
					price: "",
					sales: "",
					page: "1"
				}).then((res) => {
					console.log(res);
					console.log(res.data.data);
					this.listss = res.data.data
				}).catch((err) => {
					console.log(err);
				})
			},
			//首页轮播
			async banner() {
				const res = await this.$api("/Index/banner", 'get').then((res) => {
					res.data.data.forEach((item, index) => {
						this.swiperList.push(url.BASE_URL2 + item.image)
					})
				})
			},
			//获取首页分类
			async getindexclass() {
				const res = await this.$api("/Index/class", 'get').then((res) => {
					// console.log(res);
					res.data.data.forEach((item, index) => {
						this.list.push(item.name)
					})
					this.lists = res.data.data
				}).catch((err) => {
					console.log(err);
				})
			},
			//点击分类
			sectionChange(index) {
				this.curNow = index;
			},
			//搜索页
			// gosearch() {
			// 	uni.navigateTo({
			// 		url: '/pagesA/searchData/searchData'
			// 	})
			// },
			//页面跳转
			navTo(i) {
				uni.navigateTo({
					url:'./detial/detial?id='+i
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.search {
			width: 682rpx;
			height: auto;
			margin: 20rpx auto;
			text-align: center;
		}

		.swiper {
			width: 682rpx;
			height: auto;
			margin: 0 auto;
		}

		.timeScroll {
			width: 682rpx;
			height: 135rpx;
			background: #FFF4F1;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			margin: 0 auto;
			margin-top: 28rpx;

			.block {
				display: flex;

				view:first-child,
				view:last-child {
					width: 40rpx;
					height: 40rpx;
					background: #FFFFFF;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					margin: 24rpx 39rpx;

					image {
						width: 10rpx;
						height: 18rpx;
						margin: 15rpx;
					}
				}

				view {
					width: auto;
					margin: 0 auto;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FF3B06;
					margin-top: 20rpx;
				}
			}

			.block2 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				view {
					flex: 1;
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF3B06;
					line-height: 40rpx;
					text-align: center;
				}

				view:first-child {
					text-align: left;
					padding-left: 20rpx;
				}

				view:last-child {
					text-align: right;
					padding-right: 20rpx;
				}
			}

		}

		.dataBlock {
			width: 722rpx;
			height: auto;
			margin: 0 auto;
			margin-top: 32rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.view-list {
			width: 722rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start; //排列格式
			margin: 0 auto;
			margin-top: 32rpx;

			.zz-good-item {
				border-radius: 16rpx;
				overflow: hidden;
				margin-bottom: 30rpx;
				padding-bottom: 20rpx;
				background-color: #fff;

				text {
					line-height: 50rpx;
				}

				.image-good {
					width: 100%;
					height: 320rpx;
				}

				.view-name {
					font-size: 28rpx;
					padding: 0 20rpx;

					text {
						width: 100rpx;
						height: 40rpx;
						display: inline-block;
						margin-right: 20rpx;
						background-color: red;
						color: #ffffff;
						font-size: 24rpx;
						border-radius: 10rpx;
						text-align: center;
						line-height: 40rpx;
					}
				}

				.view-price {
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					.text-price {
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.old-price {
						font-size: 22rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #AAAAAA;
						text-decoration: line-through;
					}

					.text-remark {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #777777;
					}
				}

				.view-num {
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					text {
						margin: 3px;
						padding: 2px 5px;
						background: #FF3B06;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						color: #ffffff;
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						// line-height: 44rpx;
						// margin-right: 10rpx;
						text-align: center;
					}
				}

				.view-user {
					padding: 0 20rpx;
					display: flex;
					align-items: center;

					.image-vip {
						width: 28rpx;
						height: 28rpx;
					}

					text {
						font-size: 24rpx;
						margin-left: 10rpx;
					}
				}
			}

			.view-item {
				width: 45%;
				margin: 0 8px;

				image {
					width: 329rpx;
					height: 324rpx;
					display: block;
					margin: 0 auto;
					margin-bottom: 10rpx;
					border-radius: 8rpx;
				}

				text {
					font-size: 24rpx;
				}
			}

		}
	}
</style>